<!DOCTYPE html>
<html>
	<head>
		<title>
			Familibook
		</title>
		<link rel="stylesheet" href="css/jquery.ui.all.css">
		<script src="js/jquery-1.5.1.js"></script>
		<script src="js/jquery.bgiframe-2.1.2.js"></script>
		<script src="js/jquery.ui.core.js"></script>
		<script src="js/jquery.ui.widget.js"></script>
		<script src="js/jquery.ui.mouse.js"></script>
		<script src="js/jquery.ui.button.js"></script>
		<script src="js/jquery.ui.draggable.js"></script>
		<script src="js/jquery.ui.position.js"></script>
		<script src="js/jquery.ui.resizable.js"></script>
		<script src="js/jquery.ui.dialog.js"></script>
		<script src="js/jquery.effects.core.js"></script>
		<script>
			function getTries(name) {
				if (name.length > 11) {
					return 20;
				}
				else if (name.length < 10 && name.length > 5) {
					return (name.length * 2);
				}
				else {
					return Math.floor(name.length * 2.5);
				}
			}

			function getDownScale(img, max){
				var frac = img.width / img.height;
				if (frac < 1) {
					return img.height / max;
				}
				else if (frac > 1) {
					return img.width / max;
				}
				else {
					return false;
				}
			}
			
			function getFont(ctx, name, tries) {
				for (var i = 0; i < tries; i++) {
					var fontc = "bold " + (i * 0.1) + "em sans-serif";
					ctx.font = fontc;
					var metric = ctx.measureText(name);
					var widthf = metric.width;
					if (widthf > 115) {
						return font;
					}
					var font = fontc;
				}
			}

			function Person() {
				this.usi = undefined;
				this.name = "Anonymous";
				this.spouse = undefined;
				this.parentsArray = new Array();
				this.childrenArray = new Array();
				this.sex = "Male";
				this.x = 0;
				this.y = 0;
				this.imageurl = "../pics/" + this.sex + "-avatar.png";
			}

			var UserArray = new Array()
			{% for user in users %}
				var {{ user.usi }} = new Person();
				UserArray[UserArray.length] = {{ user.usi }};
			{% endfor %}
			
			function feedData() {
				{% for user in users %}
					{{ user.usi }}.usi = "{{ user.usi }}";
					{{ user.usi }}.name = "{{ user.name }}";
					{% if not user.spouseusi %}
					{% else %}
						{{ user.usi }}.spouse = {{user.spouseusi}};
					{% endif %}
					var i = 0;
					{% for child in user.childrenArray %}
						{{ user.usi }}.childrenArray[i] = {{ child.usi }};
						i++;
					{% endfor %}
					{% if not user.fatherusi %}
						{% if not user.motherusi %}
						{% else %}
							{{ user.usi }}.parentsArray[0] = {{ user.motherusi }};
						{% endif %}
					{% else %}
						{{ user.usi }}.parentsArray[0] = {{ user.fatherusi }};
						{% if not user.motherusi %}
						{% else %}
							{{ user.usi }}.parentsArray[1] = {{ user.motherusi }};
						{% endif %}
					{% endif %}
					{{ user.usi }}.sex = "{{ user.sex }}";
					{{ user.usi }}.imageurl = "{{ user.imageurl }}";
					{{ user.usi }}.x = {{ user.x }};
					{{ user.usi }}.y = {{ user.y }};
				{% endfor %}
			}

			function drawCanvas() {
				var ctx = document.getElementById('canvas').getContext('2d');
				feedData();
				manageStrokes(ctx);
				managePersonalBoxes(ctx);
			}

			function managePersonalBoxes(ctx) {
				for(var k in UserArray){
					drawPersonalBox(ctx, UserArray[k])
				}
			}

			function manageStrokes(ctx) {
				for(var k in UserArray){
					for(var i = 0;i < UserArray[k].childrenArray.length; i++){
						drawStroke(ctx, UserArray[k], UserArray[k].childrenArray[i], true);
					}
					for(var i = 0;i < UserArray[k].parentsArray.length; i++){
						drawStroke(ctx, UserArray[k], UserArray[k].parentsArray[i], true);
					}
					if(UserArray[k].spouse){
						drawStroke(ctx, UserArray[k], UserArray[k].spouse, false);
					}
				}
			}
			
			function getMousePos(canvas, evt) {
				var obj = canvas;
				var top = 0;
				var left = 0;
				while (obj.tagName != 'BODY') {
					top += obj.offsetTop;
					left += obj.offsetLeft;
					obj = obj.offsetParent;
				}
				var mouseX = evt.clientX - left + window.pageXOffset;
				var mouseY = evt.clientY - top + window.pageYOffset;
				return {
					x: mouseX,
					y: mouseY
				};
			}
			
			function drawStroke(ctx, parentorspouse, sonorspouse, whetherparentrelationorspousetrueifparentfalseifspouse) {
				var st1 = parentorspouse;
				var nd2 = sonorspouse;
				var rel = whetherparentrelationorspousetrueifparentfalseifspouse;
				var initx = st1.x + 100;
				var inity = st1.y + 43;
				var endx = nd2.x + 100;
				var endy = nd2.y + 43;
				var ymidy = (endy + inity) / 2;
	
				if (rel) {
					ctx.beginPath();
					ctx.moveTo(initx, inity);
					ctx.lineTo(initx, ymidy);
					ctx.lineTo(endx, ymidy);
					ctx.lineTo(endx, endy);
					ctx.stroke();
				}
				else if (!rel) {
					ctx.beginPath();
					ctx.moveTo(initx, inity);
					ctx.lineTo(endx, endy);
					ctx.stroke();
				}
				else {
					return false;
				}
			}

			function drawPersonalBox(ctx, person) {
				var width = 200;
				var height = 75;
				var border = 3;
				var name = person.name;
				var tries = getTries(name);
				var imagewidth;
				var imageheight;
				var x = person.x;
				var y = person.y;
				var mainy = person.y + 10;
				var imageurl = person.imageurl;
				
				var mousepos;
				canvas.addEventListener('mousedown', function(e){
					mousepos = getMousePos(canvas, e);
					if( mousepos.x > x && mousepos.x < x + width && mousepos.y < mainy + height && mousepos.y > mainy ){
						window.location = "/detail?usi=" + person.usi;
					}
				}, false);
				
				/*canvas.addEventListener('mouseover', function(e){
					mousepos = getMousePos(canvas, e);
					//if( mousepos.x > x && mousepos.x < x + width && mousepos.y < mainy && mousepos.y > y ){
						document.style.cursor = "move";
					//}
				}, false);*/
				
				var img = new Image();
				img.onload = function () {
					imagewidth = img.width / getDownScale(img, 70);
					imageheight = img.height / getDownScale(img, 70);
					ctx.beginPath();
					ctx.fillStyle = "#0000ff";
					ctx.moveTo(x, mainy);
					ctx.lineTo(x, y + 3);
					ctx.arc(x + 3, y + 3, 3, Math.PI, (Math.PI / 2) * 3, false);
					ctx.lineTo(x + width - 3, y);
					ctx.arc(x + width - 3, y + 3, 3, (Math.PI / 2) * 3, 0, false);
					ctx.lineTo(x + width, mainy);
					ctx.lineTo(x, mainy);
					ctx.fill();
					ctx.beginPath();
					ctx.fillStyle = "#0000ff";
					ctx.fillRect(x, mainy, width, height);
					ctx.fillStyle = "#446688";
					ctx.fillRect(x + border, mainy + border, width - (border * 2), height - (border * 2));
					ctx.drawImage(img, x + border + 2, mainy + border + 2, imagewidth, imageheight);
					ctx.fillStyle = "#c2406f";
					ctx.font = getFont(ctx, name, tries);
					ctx.textAlign = "center";
					ctx.fillText(name, x + border + imagewidth + (((x + width - border) - (x + border + imagewidth)) / 2), mainy + border + 20, 125);
					ctx.fill();
				};
				img.src = imageurl;
			}
			
			{% for user in users %}
				function {{ user.usi }}Positionfunction(){
					{% for user in users %}
						var {{ user.usi }}PositionInput = document.getElementById('{{ user.usi }}PositionInput')
						{{ user.usi }}PositionInput.style.display = "none";
					{% endfor %}
					{{ user.usi }}PositionInput = document.getElementById('{{ user.usi }}PositionInput')
					{{ user.usi }}PositionInput.style.display = "block";
				}
			{% endfor %}
			
			function picsLoaded(){
				{% for user in users %}
					var {{ user.usi }}thumbpic = document.getElementById('{{ user.usi }}thumbpic');
					{{ user.usi }}thumbpic.width = {{ user.usi }}thumbpic.width / getDownScale({{ user.usi }}thumbpic, 70);
					{{ user.usi }}thumbpic.height = {{ user.usi }}thumbpic.height / getDownScale({{ user.usi }}thumbpic, 70);
				{% endfor %}
			}
			
			function handleJquery() {
				{% for user in users %}
					$("#{{ user.usi }}positionHolder").dialog({
						autoOpen: false,
						modal: true,
						buttons: {
							"Done": function() {
								$( this ).dialog( "close" );
							}
						}
					});
				{% endfor %}
			}
			{% for user in users %}
				function {{ user.usi }}thumbafunction() {
					$("#{{ user.usi }}positionHolder").dialog( "open" );
				}
			{% endfor %}
			function init() {
				var canvas = document.getElementById('canvas');
				canvas.height = document.height - 800;
				canvas.width = document.width - 10;
				{% for user in users %}
					document.getElementById('{{ user.usi }}PositionInput').style.display = "none";
				{% endfor %}
				drawCanvas();
				picsLoaded();
				handleJquery();
			}
		</script>
		<link rel="stylesheet" href="css/galleriffic.css"/>
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery-1.3.2.js"></script>
		<script src="js/jquery.opacityrollover.js"></script>
		<script src="js/jquery.galleriffic.js"></script>
		<script src="js/gallery-settings.js"></script>
		<!--[if IE 6]>
			<script src="js/ie6-transparency.js"></script>
			<script>
				DD_belatedPNG.fix('#header .logo img, .subtitle img, .slideshow-container, .navigation-container #thumbs .thumbs li .thumb img, .navigation a.next, .footer-line, #sidebar .author-photo, .line, .commentlist .comment-reply-link, #contact-page #contact .submit');
			</script>
			<link rel="stylesheet" type="text/css" href="styles/ie6.css" />
		<![endif]-->
		<!--[if IE 7]>
			<link rel="stylesheet" type="text/css" href="styles/ie7.css" />
		<![endif]-->
		<!--[if IE 8]>
			<link rel="stylesheet" type="text/css" href="styles/ie8.css" />
		<![endif]-->
		<style type="text/css">
			.divit{
				width: 200px;
				height: 50px;
				color: #ff6633;
				cursor: pointer;
			}
			.logo{
				text-align: left;
			}
		</style>
	</head>
	<body onload="init();">
		<div id="wrap"> 
			<div id="header"> 
				<div class="logo">                	                                        
					<a href="/"><img src="pics/logo.png" alt="logo" width="150" height="75" /></a>                 
				</div>
				<div id="nav">
					<ul id="nav-pages">                 	     	
						<li>
							<a href="/" class="current">
								Home
							</a>
							<span>
								~
							</span>
						</li>
						<li>
							<a href="/sign?type=new">
								Register
							</a>
						</li>				
            		</ul>
				</div>          
            </div>
			<div id="frontpage-content">
				<div id="container">
					<canvas id="canvas"></canvas>
					<div class="navigation-container">
						<div id="thumbs" class="navigation">
							<a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>
							<ul class="thumbs noscript">
								{% for user in users %}
									<li>
										<a class="thumb" id="{{ user.usi }}thumba" onclick="{{ user.usi }}thumbafunction();" href="#">
											<table>
												<tbody>
													<tr>
														<td>
															<img src="{{ user.imageurl }}" id="{{ user.usi }}thumbpic" />
														</td>
														<td align="left" valign="center">
															{{ user.name }}
														</td>
													</tr>
												</tbody>
											</table>
										</a>
									</li>
								{% endfor %}
							</ul>
							<a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
						</div>
					</div>
				</div>
				<div id="footer"> 
					<div class="footer-line">Copyright &copy; 2011 &middot; PikuSoft &middot; All Rights Reserved</div>
				</div>
			</div>
			<div>
				{% ifequal len 0 %}
				{% else %}
					<form method="post" action="/poedit">
						{% for user in users %}
							<div id="{{ user.usi }}positionHolder">
								<div class="divit" onclick="{{ user.usi }}Positionfunction()" id="{{ user.usi }}PositionTitle">
									<b>{{ user.name }}</b>
								</div>
								<div id="{{ user.usi }}PositionInput">
									x: &nbsp;&nbsp; <input type="text" value="{{ user.x }}" name="{{ user.usi }}x" />
										<br />
									y: &nbsp;&nbsp; <input type="text" value="{{ user.y }}" name="{{ user.usi }}y" />
										<br />
										<br />
								</div>
							</div>
						{% endfor %}
							<br />
						<input value="Submit" type="submit" />
					</form>
				{% endifequal %}
			</div>
		</div>
	</body>
</html>